<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body{
            background-image: url("./img/star-bgc.jpg");
            color: red;
        }
        div{
            width: 700px;
            margin-left: 300px;
            text-align: center;
            margin-top: 40px;
        }
        #time{
            margin-top: 100px;
            font-size: 80px;
            height: 80px;

        }
        #day{
            font-size: 80px;
            height: 80px;

        }
        #Timer{
            height: 100px;
            padding-top: 5px;

        }
        #Timer_show{
            width: 600px;
            margin-top: 40px;
            margin-left: 30px;
            height: 50px;
            font-size: 50px;
        }
        .btn{
            padding:5px;
            background: #fff;
            broder:1px solid #cfcfcf;
            border-radius: 3px;

        }
        .alive{
            /*transition: all 1s ease;*/
            -webkit-transition: all 1s ease;
            -moz-transition: all 1s ease;
            -o-transition: all 1s ease;
            /*transition: property属性 duration持续时间 timing-function delay延迟;*/
            /*过渡语法*/
            /*监听元素属性变化，两个关键帧中插入过度针，变成平滑效果*/
        }
        .btn:hover{
            background-color: blue;
        }
        #circle{
            width: 210px;
            height: 210px;
            background-image: url("./img/clock1.png");
        }
    </style>
</head>
<body>
<div id="time">
    --:--:--
</div>
<div id="day">
--年--月--日
</div>
<div id="Timer">
        定时：<input type="number" id="input"/>
        <button onclick="functionTimer()" class="btn alive">开始定时</button>
    <div id="Timer_show">
        剩余时间：--
    </div>
</div>

<div>
    <div id="circle">
        <div id="rectangle">

        </div>

    </div>
</div>
<!--<embed  height="100" width="400" data="./sound/111.mp3">-->
<audio controls id="music1"style="display: none;">
    <source src="./sound/111.mp3" type="audio/mpeg">
</audio>


<script>
    function dada(){
        var date=new Date();
        var hours=date.getHours();
        var minutes=date.getMinutes();
        var seconds=date.getSeconds();

        var year=date.getFullYear();
        var month=date.getMonth()+1;
        var day=date.getDate();
        var Clock=hours+":"+minutes+":"+seconds;
        var Day=year+"年"+month+"月"+day+"日";
        document.getElementById("time").innerText=Clock;
        document.getElementById("day").innerText=Day;
    }
    dada();
    setInterval(dada,1000);


    function functionTimer(){
        var input=document.getElementById("input");
        var time=input.value;
        function showTimer() {
            time=time-1000;
            var show="剩余时间："+time;
            document.getElementById("Timer_show").innerText =show;
        }
        var time1=setInterval(showTimer,1000);
        setTimeout(Do,time);
        function Do(){
            bf();
            clearInterval(time1);
            var r=confirm("时间到了，是否关闭音乐");
            if(r==true)
            {
                var show2="剩余时间：--"
                document.getElementById("Timer_show").innerText =show2;
                bz();
            }
            else
            {

            }



        }

    }



    function bf() {
        var audio = document.getElementById("music1");
        audio.play();
    }
    function bz() {
        var audio = document.getElementById("music1");
        audio.pause();
//        audio.muted=false;
    }






</script>
</body>
</html>